<template>
	<view class="pad-26 page">
		<view class="white pad-20 radius16 font-28">
			<view class="betweenX pad-top-bottom-10">
				<view class="color-text">申请所在区域</view>
				<view class="item">{{payInfoData.city}}</view>
			</view>
			<view class="betweenX pad-top-bottom-10">
				<view class="color-text">申请预借金额</view>
				<view class="item">{{payInfoData.money}}</view>
			</view>
			<!-- <view class="betweenX pad-top-bottom-10">
				<view class="color-text">当地城市费率</view>
				<view class="item">{{payInfoData.percent}}</view>
			</view> -->
		</view>
		<view class="pad-20 white mar-top-20 betweenX radius16 font-28">
			<view class="color-text">手续费</view>
			<view v-if="payInfoData.fee" class="red">￥{{payInfoData.fee}}</view>
		</view>
	</view>

	<view class="button-bottom-box">
		<up-button @click="hanldePay" type="primary" :text="`支付手续费￥${payInfoData.fee}`"></up-button>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app'

	let payInfoData = ref();
	payInfoData.value = uni.getStorageSync('payInfo');

	// 提交支付
	const hanldePay = () => {
		// 唤起支付
		let payInfo = payInfoData.value.payInfo;
		let orderInfo = {
			prepayid: payInfo.package,
			signType: "MD5",
			package: payInfo.package, // 固定值
			nonceStr: payInfo.nonceStr, // 随机字符串
			timeStamp: payInfo.timeStamp + '',
			paySign: payInfo.paySign
		}

		uni.requestPayment({
			provider: 'wxpay', // 这里以微信支付为例
			...orderInfo,
			success: function(res) {

				uni.showToast({
					icon: 'success',
					mask: true,
					title: '支付成功'
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}, 1000)
			},
			fail: function(err) {
				console.log('支付失败:' + JSON.stringify(err));
			},
			virtua: function(virtua) {
				console.log(virtua)
			}
		});

	}
</script>

<style scoped lang="scss">
	.page {
		background: #f5f5f5;
		min-height: 100vh;
	}

	.white {
		background-color: white;
	}

	.item {
		color: #697080;
	}

	.red {
		color: #F44747;
	}

	.button-bottom-box {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		z-index: +99;
	}
</style>